<template>
  <div class="content">
    <div class="content-loading" v-show="loading">
      <div>加载中...</div>
      <div class="loader"></div>
    </div>
    <div class="content-bg">
      <img src="@/assets/images/bgTitle.png" alt="" usemap="#Map" @load="imgLoad" id="myImage" />
      <map name="Map" @click="newViews">
        <area
          shape="poly"
          :coords="item.coords"
          href="javascript:void(0)"
          :alt="item.title"
          :data-title="item.title"
          :data-category="item.category"
          v-for="item in hotZoneCoordinates"
          :title="item.title"
        />
        <area
          shape="poly"
          :coords="item.coords"
          href="javascript:void(0)"
          :alt="item.title"
          :data-title="item.title"
          :title="item.title"
          :data-category="item.category"
          v-for="item in btn"
        />
      </map>
    </div>
    <!-- 引导提示 -->
    <div class="content-wrap" v-show="dialogVisible">
      <div class="wrap-bg">
        <img src="@/assets/images/yindao.png" alt="" @load="imgLoad" id="guidePage" usemap="#bgMap" />
        <map name="bgMap" @click="closeOverlay">
          <area
            shape="poly"
            :coords="item.coords"
            href="javascript:void(0)"
            :alt="item.title"
            :data-category="item.category"
            v-for="item in hot"
          />
        </map>
      </div>
    </div>
  </div>
</template>
<script>
const PICTURE_WIDTH = 2240; //初始图片宽度
const PICTURE_HEIGHT = 1850; //初始图片高度
const idealHeight = 1150; //理想高度
import { setShowedOperationGuide } from "@/api";
import { hotZoneCoordinates, btn, hot } from "@/utils/hotZoneCoordinates";
import API from "components/api-chat-window";
export default {
  data() {
    return {
      dialogVisible: false,//引导提示引导提示
      loading: true, //加载中
      area: null, //热区dom
      hotZoneData: null, //热区原始数据
      hotZoneCoordinates, //热区坐标数据
      btn, //按钮热区数据
      hot,//操作指引
    };
  },
  methods: {
    /**
     * 关闭引导提示
     */
    async closeOverlay() {
      this.dialogVisible = false;
      await setShowedOperationGuide();
    },
    imgLoad() {
      this.loading = false;
    },
    /**
     * 热区点击事件
     */
    newViews(e) {
      const category = e.target.dataset.category;
      const title = e.target.dataset.title;
      const routeData = this.$router.resolve({
        path: "/panoramicList",
        query: { category, title },
      });
      window.open(routeData.href, "_blank");
    },
    /**
     * 根据分辨率自适应热区坐标
     */
    setCoords() {
      const width = document.body.offsetWidth; //当前浏览器宽度
      const height = document.body.offsetHeight; //当前浏览器高度
      const browserAspectRatio = width / height; //浏览器宽高比
      const pictureScale = PICTURE_WIDTH / PICTURE_HEIGHT; //图片宽高比
      const idealProportion = PICTURE_WIDTH / idealHeight; //理想图片宽高比
      const idealHeightRatio = idealHeight / PICTURE_HEIGHT; //理想高度比例
      const img = document.getElementById("myImage");
      const guidePage = document.getElementById("guidePage");
      const pictureAspectRatio = {
        value: 0, //图片宽高比
      };
      if (browserAspectRatio > idealProportion) {
        //当浏览器宽高比大于理想图片宽高比时
        const imgHeight = height / idealHeightRatio;
        const imgWidth = imgHeight * pictureScale;
        img.width = imgWidth;
        img.height = imgHeight;
        guidePage.width = imgWidth;
        guidePage.height = imgHeight;
        pictureAspectRatio.value = imgWidth / PICTURE_WIDTH;
      } else {
        const imgWidth = width;
        const imgHeight = imgWidth / pictureScale;
        img.width = imgWidth;
        img.height = imgHeight;
        guidePage.width = imgWidth;
        guidePage.height = imgHeight;
        pictureAspectRatio.value = imgWidth / PICTURE_WIDTH;
      }
      this.hotZoneData.forEach((item, index) => {
        const arr = item.split(",").map((list) => list * pictureAspectRatio.value);
        this.area[index].setAttribute("coords", arr.join(","));
      });
    },
  },
  async mounted() {
    const data = await API.showOperationGuide();
    this.dialogVisible = data.data || false;
    this.area = document.getElementsByTagName("area"); //拿到所有热区dom
    /**
     * 初始化热区锚点数据
     */
    this.hotZoneData = [...this.area].map((item) => {
      return item.getAttribute("coords");
    });
    this.setCoords(); //初始化比例转换
    /**
     * 监视浏览器缩放事件
     */
    const that = this;
    window.onresize = function () {
      that.setCoords();
    };
  },
};
</script>
<style lang="less" scoped>
.content {
  all: unset;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: block;
  box-sizing: border-box;
  &::-webkit-scrollbar {
    display: none;
  }
  .content-loading {
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: 20px;
    .loader {
      width: 50px;
      aspect-ratio: 1;
      display: grid;
      border: 4px solid #0000;
      border-radius: 50%;
      border-right-color: #25b09b;
      animation: l15 1s infinite linear;
    }
    .loader::before,
    .loader::after {
      content: "";
      grid-area: 1/1;
      margin: 2px;
      border: inherit;
      border-radius: 50%;
      animation: l15 2s infinite;
    }
    .loader::after {
      margin: 8px;
      animation-duration: 3s;
    }
    @keyframes l15 {
      100% {
        transform: rotate(1turn);
      }
    }
  }
  .content-bg {
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    background: url("../../assets/images/bgPage.png") no-repeat center/cover;
    display: flex;
    align-items: center;
    justify-content: center;
    &::-webkit-scrollbar {
    }
    img {
      box-sizing: border-box;
      object-fit: contain;
    }
  }
  .content-wrap {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    background: rgba(0, 0, 0, 0.7);
    box-sizing: border-box;
    .wrap-bg {
      width: 100vw;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
      overflow: hidden;
      img {
        box-sizing: border-box;
        object-fit: contain;
      }
    }
  }
}
</style>
